//return a btn element
//param: button text
function generateButton(innerText){
    var btn = document.createElement('button')
    btn.classList.add('submit')
    btn.innerText = innerText
    return btn
}

//return an table element filled with ingredients
//param: ingredients
function generateIngridientList(ingredients){
    var ingredientElement = document.createElement('div')
    ingredientElement.classList.add('ingredients')

    ingredientElement.innerHTML = `
        <fieldset>
                <legend>Complete the recipe</legend>
            <table>
                <tr>
                    <td><input type="checkbox" id="i1">${ingredients[0]}</td>
                    <td><input type="checkbox" id="i2">${ingredients[1]}</td>
                    <td><input type="checkbox" id="i3">${ingredients[2]}</td>
                    <td><input type="checkbox" id="i4">${ingredients[3]}</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="i5">${ingredients[4]}</td>
                    <td><input type="checkbox" id="i6">${ingredients[5]}</td>
                    <td><input type="checkbox" id="i7">${ingredients[6]}</td>
                    <td><input type="checkbox" id="i8">${ingredients[7]}</td>
                </tr>
            </table>
        </fieldset>`

    return ingredientElement
}

//return a h2 element
//param: text to be displayed
function generateName(content){
    var nameElement = document.createElement('h2')
    nameElement.innerText = content
    return nameElement
}

//change the piture of the img tag holds
//param: new picture url
function switchPicture(picURL){
    document.querySelector('img').src = picURL
}

//store data using localStorage object
//param1: unique key to mark the data, should be of string type
//param2: data to be stored
function storeData(key,data){
    var serializedData = JSON.stringify(data)
    localStorage.setItem(key,serializedData)
}

//get data storged in localStorage
//param: key than mapped to the data stored, the key should be of string type
function getData(key){
    return JSON.parse(localStorage.getItem(key))
}

